<template>
  <ul id="circles">
    <li v-for="i in imageNum" :key="i-1"
        :class="{'current':currentIndex === i-1}"
        :data-index="i-1"
        @mouseover="chooseCircle"></li>
  </ul>
</template>

<script>
import {mapState} from "vuex";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Circles",
  computed: {
    ...mapState(["imageNum", "currentIndex", "isAutoSwitch"])
  },
  methods: {
    chooseCircle(e) {
      this.$store.commit("CircleChange", Number(e.target.dataset.index))
    }
  },
  mounted() {
    if (this.isAutoSwitch) {
      this.$store.dispatch("autoChange");
    }
  },
  beforeDestroy() {
    clearInterval(this.$store.state.timer)
  }
}
</script>

<style scoped>
  ul {
    width: 200px;
    height: 5%;
    margin: 50px;
    position: absolute;
  }
  li {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px grey solid;
    border-radius: 50%;
    margin-left: 4px;
  }
  .current {
    background-color: orange;
    border: 3px saddlebrown groove;
  }
</style>